<template>
  <div>
    <div class='banitem' @click='goDetail'>
      <div class='link'>
        <div class='pic'>
          <el-image class="img" :src='item.bkCover' alt=''>
            <template #error>
              <el-image class="img" :src='defaultCover' alt=''/>
            </template>
          </el-image>
        </div>

        <div class='text'>
          <div class='title'>
            <div class='left' :title="item.bkName">
              {{ item.bkName }}
            </div>
            <div class='right'>
              {{ item.createName }}
            </div>
          </div>
          <div class='info'>
            <div class='classname' :title="item.bkClassName">{{ item.bkClassName }}</div>
            <div class='time'>{{ formatJoinItemDate }}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { timeInterval } from '@/utils/common';
import dayjs from "dayjs";

defineOptions({
  name: 'BanListItemForStudent'
})

const router = useRouter();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const formatJoinItemDate = computed(()=> {
  const {joiningTime} = unref(props.item)
  if (!joiningTime) return ''
  return dayjs(+joiningTime).format('YYYY-MM-DD HH:mm')
})

//跳转到班课详情
const goDetail = () => {
  router.push('/student');
  sessionStorage.setItem('stubkitem', JSON.stringify(props.item));
  sessionStorage.setItem('stubkid', props.item.id);
};


</script>

<style lang='scss' scoped>
@use '@/assets/style/custom' as *;

.banitem {
  width: 100%;
  min-height: 200px;
  position: relative;
  z-index: 21;
  cursor: pointer;

  .link {
    display: block;
  }

  .pic {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;

    .img {
      display: block;
      width: 100%;
      height: 140px;
      transition: 0.3s;
    }
  }

  .text {
    width: 100%;
    height: 70px;
    padding: 6px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 4px;
      padding-bottom: 6px;
      font-size: 15px;
      color: #333;

      .left {
        flex: 1;
        font-weight: 600;
        padding-right: 10px;
        @include text-line-hidden();
      }

      .right {
        flex-shrink: 0;
        margin-left: 5px;
        font-size: 12px;
        text-align: right;
      }
    }

    .info {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #aaa;

      .classname {
        width: 50%;
        @include text-line-hidden();
      }

      .time {
        width: 50%;
        text-align: right;
        overflow: hidden;
      }
    }
  }


}
</style>
